<template>
	<div class="record">
		<div class="flex">
			<div :class="type == 1 ? 'disBtn' : 'btn'" @click="handleChange(1)">短信记录</div>
			<div :class="type == 2 ? 'disBtn' : 'btn'" @click="handleChange(2)">云呼记录</div>
		</div>
		<div class="mt-7">
			<el-table
				v-if="type == 1"
				:data="tableData"
				border
				style="width: 100%"
				class="custom-table"
				ref="dataTableRef"
				height="764px"
				v-loading="loading"
				element-loading-background="rgba(0, 0, 0, 0.3)"
				:row-style="rowStyle"
				:cell-style="cellStyle"
				highlight-current-row
				show-overflow-tooltip
				:header-cell-style="{ border: '1px solid rgba(27, 178, 224, 0.2)' }"
			>
				<el-table-column prop="sendTime" label="发送时间" min-width="17%" />
				<el-table-column prop="executeNode" label="发送节点" min-width="13%" />
				<el-table-column prop="receiveUserName" label="接收部门" min-width="13%" />
				<el-table-column prop="phonenumber" label="接收手机号" min-width="13%" />
				<el-table-column prop="sendResult" label="短信状态" min-width="13%">
					<template #default="scope">
						<span>{{ scope.row.sendResult == 1 ? '发送成功' : scope.row.sendResult == 101 ? '短信内容为空' : '发送失败' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="短信内容" min-width="33%" />
			</el-table>
			<el-table
				v-if="type == 2"
				:data="tableData"
				border
				style="width: 100%"
				class="custom-table"
				ref="dataTableRef"
				height="764px"
				v-loading="loading"
				element-loading-background="rgba(0, 0, 0, 0.3)"
				:row-style="rowStyle"
				:cell-style="cellStyle"
				highlight-current-row
				show-overflow-tooltip
				:header-cell-style="{ border: '1px solid rgba(27, 178, 224, 0.2)' }"
			>
				<el-table-column prop="sendTime" label="呼叫时间" min-width="20%" />
				<el-table-column prop="executeNode" label="呼叫部门" min-width="23%" />
				<el-table-column prop="phonenumber" label="呼叫手机号" min-width="21%" />
				<el-table-column prop="sendResult" label="通话状态" min-width="18%">
					<template #default="scope">
						<span>{{ callResult[scope.row.sendResult] }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="duration" label="通话时长" min-width="18%" />
			</el-table>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { getRecordList } from '@/api/illegal'

const props = defineProps<{
	eventProcessId: string
}>()
const callResult = ['正常通话', '被叫通话未应答', '外呼失败']
const loading = ref(false)
const type = ref(1) // 1-短信记录 2-云呼记录
const rowStyle = { height: '69px', background: 'transparent' }
const cellStyle = { border: '1px solid rgba(27, 178, 224, 0.2)', fontSize: '26px' }
const tableData = ref([])
const handleChange = (val) => {
	if (val != type.value) {
		type.value = val
		loading.value = true
		getRecordList({ eventProcessIds: props.eventProcessId, type: type.value })
			.then((res) => {
				console.log(' record', res)
				tableData.value = res.data
				loading.value = false
			})
			.catch((err) => {
				ElMessage.error(err)
				loading.value = false
			})
	}
}
watch(
	props,
	() => {
		loading.value = true
		getRecordList({ eventProcessIds: props.eventProcessId, type: type.value })
			.then((res) => {
				// console.log(' record', res)
				tableData.value = res.data
				loading.value = false
			})
			.catch((err) => {
				ElMessage.error(err)
				loading.value = false
			})
	},
	{ immediate: true }
)
</script>
<style lang="scss" scoped>
.record {
	padding: 40px;
	font-size: 24px;
}
.btn {
	background-image: url('@/assets/images/illegal/diaodu.png');
	width: 156px;
	height: 57px;
	background-size: cover;
	background-size: 100% 100%;
	color: white;
	text-align: center;
	line-height: 57px;
	margin-right: 15px;
	cursor: pointer;
}
.disBtn {
	@extend .btn;
	background-image: url('@/assets/images/illegal/disBtn.png');
	color: rgba(255, 255, 255, 0.4);
}
// 修改table样式
.custom-table {
	// border: 1px solid red;
	background-color: transparent;
	color: white;
	--el-table-border-color: none;
	font-size: 20px;
}
:deep(.el-table th) {
	background: #003352;
	color: rgba(27, 178, 224, 1);
	height: 74px;
	font-size: 24px;
}
:deep(.el-table__body tr.current-row > td) {
	background-color: rgba(255, 255, 255, 0.04) !important; /* 选中行背景色 */
	color: #fff; /* 选中行文字颜色 */
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
	background-color: rgba(255, 255, 255, 0.04) !important; /* hover背景色 */
}
</style>
